Add tests for flex-basis property of CSS3 Flexbox
diff --git a/contributors/intel/submitted/css3-flexbox/flex-basis-001.html b/contributors/intel/submitted/css3-flexbox/flex-basis-001.html new file mode 100644 index 0000000..e5ae8b0 --- /dev/null +++ b/contributors/intel/submitted/css3-flexbox/flex-basis-001.html
@@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: flex-basis - positive number</title> +<link rel="author" href="Intel" title="http://www.intel.com"> +<link rel="author" href="Intel" title="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="7.3.3. The 'flex-basis' property" href="http://www.w3.org/TR/css3-flexbox/#flex-basis-propdef"> +<link name="match" href="ref-filled-green-100px-square.xht"> +<meta name="flags" content=""> +<meta name="assert" content="The 'flex-basis' property set positive number, the actual value of test element size is same as the positive number"> +<style> + #container { + background-color: red; + display: flex; + height: 100px; + width: 100px; + } + #container div{ + background-color: green; + height: 100px; + } + #test { + flex-basis: 60px; + } + #ref { + width: 40px; + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="container"> + <div id="test"></div> + <div id="ref"></div> + </div> +</body> diff --git a/contributors/intel/submitted/css3-flexbox/flex-basis-002.html b/contributors/intel/submitted/css3-flexbox/flex-basis-002.html new file mode 100644 index 0000000..79f9285 --- /dev/null +++ b/contributors/intel/submitted/css3-flexbox/flex-basis-002.html
@@ -0,0 +1,42 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: flex-basis - positive number</title> +<link rel="author" href="Intel" title="http://www.intel.com"> +<link rel="author" href="Intel" title="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="7.3.3. The 'flex-basis' property" href="http://www.w3.org/TR/css3-flexbox/#flex-basis-propdef"> +<link name="match" href="ref-filled-green-100px-square.xht"> +<meta name="flags" content=""> +<meta name="assert" content="The 'flex-basis' property specified correct value, the actual value of test element size is same as to the value of 'flex-basis' property, and the 'width' property is invalid."> +<style> + #container { + background-color: red; + display: flex; + height: 100px; + width: 100px; + } + #container div{ + height: 100px; + } + #test { + flex-basis: 60px; + width: 80px; + } + #ref { + background-color: green; + width: 40px; + } + #cover { + background-color: green; + height: 100px; + margin-top: -100px; + width: 60px; + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="container"> + <div id="test"></div> + <div id="ref"></div> + </div> + <div id="cover"></div> +</body> diff --git a/contributors/intel/submitted/css3-flexbox/flex-basis-003.html b/contributors/intel/submitted/css3-flexbox/flex-basis-003.html new file mode 100644 index 0000000..9a36def --- /dev/null +++ b/contributors/intel/submitted/css3-flexbox/flex-basis-003.html
@@ -0,0 +1,42 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: flex-basis - negative number(width not specified)</title> +<link rel="author" href="Intel" title="http://www.intel.com"> +<link rel="author" href="Intel" title="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="7.3.3. The 'flex-basis' property" href="http://www.w3.org/TR/css3-flexbox/#flex-basis-propdef"> +<link name="match" href="ref-filled-green-100px-square.xht"> +<meta name="flags" content=""> +<meta name="assert" content="The 'flex-basis' property set negative number, the tested element is not shown when width not set either."> +<style> + #container { + background-color: red; + display: flex; + height: 100px; + width: 100px; + } + #container div{ + height: 100px; + } + #test { + flex-basis: -50px; + } + #ref { + background-color: green; + width: 50px; + } + #cover { + background-color: green; + height: 100px; + margin-left: 50px; + margin-top: -100px; + width: 50px; + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="container"> + <div id="test"></div> + <div id="ref"></div> + </div> + <div id="cover"></div> +</body> diff --git a/contributors/intel/submitted/css3-flexbox/flex-basis-004.html b/contributors/intel/submitted/css3-flexbox/flex-basis-004.html new file mode 100644 index 0000000..3eb1406 --- /dev/null +++ b/contributors/intel/submitted/css3-flexbox/flex-basis-004.html
@@ -0,0 +1,44 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: flex-basis - negative number(width specified)</title> +<link rel="author" href="Intel" title="http://www.intel.com"> +<link rel="author" href="Intel" title="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="7.3.3. The 'flex-basis' property" href="http://www.w3.org/TR/css3-flexbox/#flex-basis-propdef"> +<link name="match" href="ref-filled-green-100px-square.xht"> +<meta name="flags" content=""> +<meta name="assert" content="The 'flex-basis' property set negative number, the actual width of tested element is +same as the value of 'width' property specified."> +<style> + #container { + background-color: red; + display: flex; + height: 100px; + width: 100px; + } + #container div{ + background-color: green; + height: 100px; + } + #test { + flex-basis: -50px; + width: 30px; + } + #ref { + width: 50px; + } + #cover { + background-color: green; + height: 100px; + margin-left: 80px; + margin-top: -100px; + width: 20px; + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="container"> + <div id="test"></div> + <div id="ref"></div> + </div> + <div id="cover"></div> +</body> diff --git a/contributors/intel/submitted/css3-flexbox/flex-basis-005.html b/contributors/intel/submitted/css3-flexbox/flex-basis-005.html new file mode 100644 index 0000000..43fbfce --- /dev/null +++ b/contributors/intel/submitted/css3-flexbox/flex-basis-005.html
@@ -0,0 +1,29 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: flex-basis - 0</title> +<link rel="author" href="Intel" title="http://www.intel.com"> +<link rel="author" href="Intel" title="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="7.3.3. The 'flex-basis' property" href="http://www.w3.org/TR/css3-flexbox/#flex-basis-propdef"> +<link name="match" href="ref-filled-green-100px-square.xht"> +<meta name="flags" content=""> +<meta name="assert" content="The 'flex-basis' property set '0', the actual width of tested element is same as 0."> +<style> + #container { + background-color: green; + display: flex; + height: 100px; + width: 100px; + } + #test { + background-color: red; + flex-basis: 0; + height: 100px; + width: 100px; + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="container"> + <div id="test"></div> + </div> +</body> diff --git a/contributors/intel/submitted/css3-flexbox/flex-basis-006.html b/contributors/intel/submitted/css3-flexbox/flex-basis-006.html new file mode 100644 index 0000000..c9fabb5 --- /dev/null +++ b/contributors/intel/submitted/css3-flexbox/flex-basis-006.html
@@ -0,0 +1,29 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: flex-basis - 0%</title> +<link rel="author" href="Intel" title="http://www.intel.com"> +<link rel="author" href="Intel" title="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="7.3.3. The 'flex-basis' property" href="http://www.w3.org/TR/css3-flexbox/#flex-basis-propdef"> +<link name="match" href="ref-filled-green-100px-square.xht"> +<meta name="flags" content=""> +<meta name="assert" content="The 'flex-basis' property set '0%', the actual width of tested element is same as 0."> +<style> + #container { + background-color: green; + display: flex; + height: 100px; + width: 100px; + } + #test { + background-color: red; + flex-basis: 0%; + height: 100px; + width: 100px; + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="container"> + <div id="test"></div> + </div> +</body> diff --git a/contributors/intel/submitted/css3-flexbox/flex-basis-007.html b/contributors/intel/submitted/css3-flexbox/flex-basis-007.html new file mode 100644 index 0000000..132a759 --- /dev/null +++ b/contributors/intel/submitted/css3-flexbox/flex-basis-007.html
@@ -0,0 +1,35 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: flex-basis - auto</title> +<link rel="author" href="Intel" title="http://www.intel.com"> +<link rel="author" href="Intel" title="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="7.3.3. The 'flex-basis' property" href="http://www.w3.org/TR/css3-flexbox/#flex-basis-propdef"> +<link name="match" href="ref-filled-green-100px-square.xht"> +<meta name="flags" content=""> +<meta name="assert" content="The 'flex-basis' property set 'auto', the actual width of tested element same as the value which specified by width property."> +<style> + #container { + background-color: red; + display: flex; + height: 100px; + width: 100px; + } + #container div{ + background-color: green; + height: 100px; + } + #ref { + width: 50px; + } + #test { + flex-basis: auto; + width: 50px; + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="container"> + <div id="test"></div> + <div id="ref"></div> + </div> +</body> diff --git a/contributors/intel/submitted/css3-flexbox/flex-basis-008.html b/contributors/intel/submitted/css3-flexbox/flex-basis-008.html new file mode 100644 index 0000000..97aa0b6 --- /dev/null +++ b/contributors/intel/submitted/css3-flexbox/flex-basis-008.html
@@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Flexbox Test: flex-basis - 50%</title> +<link rel="author" href="Intel" title="http://www.intel.com"> +<link rel="author" href="Intel" title="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="7.3.3. The 'flex-basis' property" href="http://www.w3.org/TR/css3-flexbox/#flex-basis-propdef"> +<link name="match" href="ref-filled-green-100px-square.xht"> +<meta name="flags" content=""> +<meta name="assert" content="The 'flex-basis' property set positive percentage, the actual width of tested element same as the percentage of flex container size."> +<style> + #container { + background-color: red; + display: flex; + height: 100px; + width: 100px; + } + #container div{ + background-color: green; + height: 100px; + } + #ref { + width: 40px; + } + #test { + flex-basis: 60%; + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="container"> + <div id="ref"></div> + <div id="test"></div> + </div> +</body> diff --git a/contributors/intel/submitted/css3-flexbox/ref-filled-green-100px-square.xht b/contributors/intel/submitted/css3-flexbox/ref-filled-green-100px-square.xht new file mode 100644 index 0000000..651cf75 --- /dev/null +++ b/contributors/intel/submitted/css3-flexbox/ref-filled-green-100px-square.xht
@@ -0,0 +1,29 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + div + { + background-color: green; + height: 100px; + width: 100px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div></div> + + </body> +</html> \ No newline at end of file 